<template>
  <!-- 展开/收缩的图标 -->
  <el-icon style="font-size: 26px;cursor: pointer" v-if="collapseIcon" @click="handleCollapse">
    <Expand/>
  </el-icon>
  <el-icon style="font-size: 26px;cursor: pointer" v-else @click="handleCollapse">
    <Fold/>
  </el-icon>
  <!-- 面包屑 -->


  <!-- 个人头像及下拉选项 -->
  <div class="personal">

    <!--  全屏和退出全屏  -->
    <span
        v-if="flag"
        class="iconfont-myicons"
        style="font-size: 30px; margin-right: 5px; cursor: pointer;"
        @click="handleFullScreen">&#xeb11;</span>
    <span
        v-else
        class="iconfont-myicons"
        style="font-size: 30px; margin-right: 5px; cursor: pointer;"
        @click="handleFullScreen">&#xeb10;</span>

    <el-dropdown @command="handleCommand">
      <!-- 头像按钮 -->
      <span class="el-dropdown-link" style="display: flex;align-items: center">
      <el-avatar src="https://p2.ssl.qhimgs1.com/sdr/400__/t04e5883796f66361ac.jpg" class="avatar"></el-avatar>
        <span>管理员</span>
    </span>

      <!-- 下拉菜单项 -->
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">个人资料</el-dropdown-item>
          <el-dropdown-item command="settings">设置</el-dropdown-item>
          <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>


<script setup>
import {mainStore} from '../stores/main.js'
import { ref, onMounted, onUnmounted } from 'vue';
import {Expand, Fold} from '@element-plus/icons-vue'
import {ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem} from 'element-plus'
import {ElBreadcrumb, ElBreadcrumbItem, ElIcon} from 'element-plus'

//1、控制菜单栏伸展和收缩
const Store = mainStore()
const collapseIcon = ref(true);
const handleCollapse = () => {
  Store.changeCollapse();
  Store.changeAsideWidth();
  collapseIcon.value = collapseIcon.value !== true;
}

// 2、处理头像下面的菜单项点击事件
const handleCommand = (command) => {
  console.log('点击的命令是: ', command);
  // 根据 'command' 的不同，执行不同的操作
  // 比如导航到不同的页面或执行退出登录等
};


//3、以下代码监听全屏和退出全屏的状态
const flag = ref(false);
const handleFullScreen = () => {
  if (!document.fullscreenElement) {
    flag.value = true; // 即将请求进入全屏
    document.documentElement.requestFullscreen().catch((e) => {
      flag.value = false; // 如果请求失败，则保持flag为false
    });
  } else {
    flag.value = false; // 即将退出全屏
    document.exitFullscreen().catch((e) => {
      flag.value = true; // 如果退出失败，则保持flag为true
    });
  }
};

// 监听全屏状态变化事件
const onFullScreenChange = () => {
  flag.value = !!document.fullscreenElement;
};

onMounted(() => {
  document.addEventListener('fullscreenchange', onFullScreenChange);
});

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', onFullScreenChange);
});
</script>

<style scoped>
.personal {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.avatar {
  width: 40px;
  height: 40px;
  margin-right: 2px;
}
</style>